<template>
  <div class="box">
    <div class="chain">
      <ul class="chain-top clearfix">
        <li :class="[activeLink == 3 ? 'active' : '']" @click="changeLink(3)">
          <span>优势环节（{{ nums.goodness }}个）</span>
        </li>
        <li :class="[activeLink == 2 ? 'active' : '']" @click="changeLink(2)">
          <span>薄弱环节（{{ nums.bedness }}个）</span>
        </li>
        <li :class="[activeLink == 1 ? 'active' : '']" @click="changeLink(1)">
          <span>缺失环节（{{ nums.deletion }}个）</span>
        </li>
      </ul>
      <ul class="chain-grid">
        <li
          v-for="item of linkList"
          :key="item"
          :class="[activeName == item ? 'active' : '']"
          @click="changeName(item)"
        >
          {{ item }}
        </li>
      </ul>
      <el-pagination
        @current-change="handleSizeChangeChina"
        :current-page.sync="pageChain"
        :page-size="per_pageChain"
        layout=" prev, pager, next, jumper"
        :total="totalChain"
      >
      </el-pagination>
    </div>
    <div class="box-right">
      <div class="title-tip">
        <img src="~@img/public/icon-qiye.png" alt="" />
        <span>招商企业列表</span>
      </div>
      <el-table
        v-loading="loading"
        :data="listInfo"
        ref="multipleTable"
        border
        stripe
        tooltip-effect="light"
        :height="394"
        :header-cell-style="{
          textAlign: 'center',
        }"
        :cell-style="{
          textAlign: 'center',
        }"
      >
        <el-table-column
          :show-overflow-tooltip="true"
          label="企业名称"
          width="260"
        >
          <template slot-scope="scope">
            <div @click="goEnterPrise(scope.row.id)" style="cursor:pointer">
              {{ scope.row.company_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="所属地区">
          <template slot-scope="scope">
            <div>
              {{ scope.row.district }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="buildate"
          label="成立日期"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="legal"
          label="法人"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="capital"
          label="注册资本/万元"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="status"
          label="企业状态"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="address"
          label="地址"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="telephone"
          label="联系方式"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleSizeChange"
        :current-page.sync="page"
        :page-size="per_page"
        layout=" prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { radarProlink, radarRecommond } from "@api/radar";
export default {
  data() {
    return {
      activeLink: 3,
      activeName: "",
      nums: {
        bedness: 0,
        deletion: 0,
        goodness: 0,
      },
      linkList: [],
      totalChain: 0,
      pageChain: 1,
      per_pageChain: 12,
      loading: false,
      listInfo: [],
      total: 0,
      page: 1,
      per_page: 7,
    };
  },
  props: ["industry_id", "industry_cate"],
  watch: {
    industry_id(nv, ov) {
      //
      if (this.industry_cate == 2) {
        this.pageChain = 1;
        this.getProlink();
      }
    },
  },
  mounted() {
    if (this.industry_cate == 2) {
      this.pageChain = 1;
      this.getProlink();
    }
  },
  methods: {
    async getProlink() {
      let res = await radarProlink({
        inid: this.industry_id, // 二级行业id（1级行业不做选项，只做展开）
        area: ["山西省", "太原市", ""], // 省市区【省，市，区】
        link_type: this.activeLink, //   # 缺失环节1，薄弱环节2，优势环节3
        page: this.pageChain, //
        perpage: this.per_pageChain,
      });
      console.log(res);
      if (res.code && res.code != 0) {
        this.linkList = [];
        this.totalChain = 0;
        this.nums = {
          bedness: 0,
          deletion: 0,
          goodness: 0,
        };
        this.listInfo = [];
        this.total = 0;
      } else if (res.length == 0) {
        this.linkList = [];
        this.totalChain = 0;
        this.nums = {
          bedness: 0,
          deletion: 0,
          goodness: 0,
        };
        this.listInfo = [];
        this.total = 0;
      } else {
        this.linkList = res.df;
        if (this.activeLink == 1) {
          this.totalChain = res.size.deletion;
        }
        if (this.activeLink == 2) {
          this.totalChain = res.size.bedness;
        }
        if (this.activeLink == 3) {
          this.totalChain = res.size.goodness;
        }
        this.nums = res.size;
        this.activeName = res.df[0];
        this.getRecommond();
      }
    },
    async getRecommond() {
      this.loading = true;
      let res = await radarRecommond({
        name: this.activeName, //  # 产品名
        page: this.page,
        perpage: this.per_page,
        select: "其他", // 其他
      });
      if (res.code && res.code != 0) {
        this.listInfo = [];
        this.total = 0;
      } else {
        this.listInfo = res.df;
        this.total = res.size;
      }
      this.loading = false;
    },
    changeLink(type) {
      this.activeLink = type;
      this.pageChain = 1;
      this.getProlink();
    },
    changeName(name) {
      this.activeName = name;
      this.page = 1;
      this.getRecommond();
    },
    goEnterPrise(id) {
      this.$router.push({
        name: "enterprise",
        params: { id, activeMenu: "radar", type: "qg" },
      });
    },
    handleSizeChange(val) {
      this.page = val;
      this.getRecommond();
    },
    handleSizeChangeChina(val) {
      this.pageChain = val;
      this.getProlink();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  height: 100%;
  .box-right {
    position: relative;
    flex: 1;

    .title-tip {
      height: 70px;
      line-height: 70px;
      img {
        vertical-align: middle;
        width: 20px;
        height: 20px;
      }
      span {
        margin-left: 8px;
        vertical-align: middle;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
      }
    }
  }
}
.chain {
  padding: 30px;
  width: 100%;
  height: 190px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
  border-radius: 10px;
}
.status-box {
  float: left;
  width: 130px;
  height: 40px;
  line-height: 40px;
  background: #ffffff;
  border: 1px solid #5889dc;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #5889dc;
  text-align: center;
  cursor: default;
  img {
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -2px;
  }
}
.left-status {
  border-radius: 10px 0px 0px 10px;
  border-right: 0;
}
.right-status {
  border-radius: 0px 10px 10px 0px;
}

.love-btn {
  float: right;
  width: 90px;
  margin-top: 8px;
  text-align: left;
  img {
    vertical-align: middle;
    margin-right: 8px;
  }
  span {
    vertical-align: middle;
  }
}
.map-btn {
  position: absolute;
  bottom: 30px;
  right: 40px;
  width: 147px;
  height: 40px;
  line-height: 36px;
  background: #e7f4ff;
  border-radius: 10px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #4077c8;
  text-align: center;
  img {
    vertical-align: middle;
    margin-right: 8px;
  }
  span {
    vertical-align: middle;
  }
}
.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.chart-box {
  padding: 40px 0;
  width: 100%;
  height: 100%;
}
.chart {
  width: 100%;
  height: 100%;
}
.Industrial-chain {
  display: flex;
  height: 95%;
  justify-content: space-between;
  align-self: center;
  margin-bottom: 30px;
  & > li {
    // width: 480px;
    flex: 1;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    cursor: default;
    li {
      font-weight: bold;
      cursor: default;
      li {
        font-weight: 400;
      }
    }
  }

  .chain_head {
    // height: 48px;
    // line-height: 48px;

    height: 60px;
    line-height: 60px;
    border-radius: 6px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
  }
  .top_chain {
    margin: 40px 10px 0 0;
    .chain_head {
      background: linear-gradient(0deg, #747bfe 0%, #468ae4 100%);
      box-shadow: 0px 2px 5px 0px rgba(32, 46, 127, 0.5);
    }
    /deep/ .el-collapse {
      height: calc(100% - 70px);
      margin-top: 10px;
      background: rgba(120, 163, 255, 0.15);
      border-radius: 6px;
      overflow-y: scroll;
      scrollbar-color: #767ffe #ebf1ff; //滚动条轨道颜色   滚动条滑块的颜色
      scrollbar-width: 6px;
      scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 70px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 6px;
        background: linear-gradient(0deg, #747bfe, #468ae4);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        background: #ebf1ff;
        border-radius: 6px;
      }
    }
  }
  .center_chain {
    margin: 40px 10px 0 0;

    .chain_head {
      background: linear-gradient(0deg, #ff7c78, #fd9965);
    }
    /deep/ .el-collapse {
      height: calc(100% - 70px);
      margin-top: 10px;
      background: rgba(255, 114, 114, 0.15);
      border-radius: 6px;
      // overflow-y: auto;
      overflow-y: scroll;
      scrollbar-color: #ff7c78 #ffeaea; //滚动条轨道颜色   滚动条滑块的颜色
      scrollbar-width: 6px;
      scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 70px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 6px;
        background: linear-gradient(0deg, #ff7c78, #fd9965);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        background: #ffeaea;
        border-radius: 6px;
      }
    }
  }
  .bottom_chain {
    margin: 40px 0 0 0;
    .chain_head {
      background: linear-gradient(0deg, #1ed0c4, #19d0b2);
    }
    /deep/ .el-collapse {
      margin-top: 10px;
      height: calc(100% - 70px);
      background: rgba(23, 208, 177, 0.15);
      border-radius: 6px;
      overflow-y: scroll;
      scrollbar-color: #1ed0c4 #dcf8f3; //滚动条轨道颜色   滚动条滑块的颜色
      scrollbar-width: 6px;
      scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 70px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 6px;
        background: linear-gradient(0deg, #1ed0c4, #19d0b2);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        background: #dcf8f3;
        border-radius: 6px;
      }
    }
  }
}
/deep/ .el-collapse-item__header,
/deep/ .el-collapse-item__wrap {
  background: transparent;
}
.option {
  margin: 28px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
// 修改输入框
/deep/ .option .el-input {
  width: 88%;
  height: 32px;
  line-height: 32px;
}

/deep/ .option .el-input__inner {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
  height: 32px;
  line-height: 32px;
}
// 修改选择框
/deep/ .option .el-select {
  width: 140px;
}
/deep/ .el-select .el-input.is-focus .el-input__inner {
  border-color: #cccccc;
  background: #fff;
}
/deep/ .option .name .el-input {
  margin: 16px 0 0 0;
  width: 290px;
}
/deep/ .option .el-select .el-input {
  width: 140px;
}
/deep/ .option .el-input__icon {
  line-height: 32px;
}
//
/deep/ .option .el-icon-arrow-up:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .option .el-select .el-input .el-select__caret {
  transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -webkit-transform: rotateZ(0);
  -o-transform: rotateZ(0);
}
/deep/ .option .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
}
// 修改按钮
/deep/ .option .el-button {
  margin-top: 16px;
  width: 120px;
  height: 32px;
  line-height: 8px;
  text-align: center;
  border-radius: 4px;
}
/deep/ .option .el-button:first-of-type {
  background: #446db3;
  color: #fff;
}
/deep/ .option .el-button:last-of-type {
  color: #446db3;
  border-color: #446db3;
}
.box-right .find {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  img,
  span {
    vertical-align: middle;
    margin-right: 10px;
  }
}
/deep/.el-pagination__editor {
  height: 40px;
}
/deep/ .el-pagination__editor.el-input .el-input__inner {
  height: 40px;
  color: #ccc;
}
/deep/ .el-pagination__editor.el-input .el-input__inner:active {
  color: #666;
}
/deep/ .el-pagination__editor.el-input .el-input__inner:focus {
  color: #666;
}
.chain {
  position: relative;
  /deep/ .el-pagination {
    position: absolute;
    right: 30px;
    top: 30px;
    margin-top: 0;
  }
  .chain-top li {
    position: relative;
    float: left;
    margin-right: 20px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #e8e8e8;
    border-radius: 10px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    span {
      position: relative;
      z-index: 99;
      cursor: default;
    }
    &.active {
      font-weight: bold;
      color: #fff;
      background: #446db3;
      &::after {
        content: "";
        position: absolute;
        bottom: -9px;
        left: 50%;
        margin-left: -9px;
        width: 18px;
        height: 18px;
        background: #446db3;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        z-index: 8;
      }
    }
  }
}
.chain-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  li {
    position: relative;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    cursor: default;
    &.active {
      font-weight: bold;
      color: #446db3;
    }
    &::after {
      content: "";
      position: absolute;
      top: 12px;
      right: 0;
      width: 1px;
      height: 12px;
      background: #cccccc;
    }
    &:nth-of-type(6n):after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      background: transparent;
    }
    &:last-of-type:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      background: transparent;
    }
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .chain {
    padding: 20px 30px 0;
    height: 170px;
  }
  .box .box-right .title-tip {
    height: 54px;
    line-height: 54px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/ .el-table {
    max-width: 1100px;
    height: 294px !important;
  }
  .chain {
    height: 170px;
  }
  .chain .el-pagination {
    position: absolute;
    top: 160px;
  }
  /deep/ .el-tabs .el-tabs__content {
    padding: 15px 30px 20px;
  }
  .chain .chain-top li {
    width: 170px;
    height: 30px;
    line-height: 30px;
  }
  /deep/.chain .el-pagination {
    position: absolute;
    top: 122px;
  }
  .box .box-right .title-tip {
    height: 40px;
    line-height: 40px;
  }
  .chain-grid li {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }
  .chain-grid {
    margin-top: 10px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  /deep/ .el-table {
    max-width: 1000px;
    height: 346px !important;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .el-table {
    max-width: 1000px;
    height: 394px !important;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/ .el-table {
    max-width: 730px;
    height: 246px !important;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .chain .chain-top li {
    width: 160px;
  }
  .chain {
    max-width: 574px;
    height: 220px;
    padding: 16px 8px 0;
  }
  /deep/ .el-table {
    max-width: 574px;
    height: 196px !important;
  }
  .chain-grid li {
    font-size: 12px;
    white-space: nowrap;
  }

  .chain .chain-top li {
    width: 130px;
  }
  .chain .chain-top li {
    font-size: 14px;
  }
}
</style>
